<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
		  <view class="logoView">
			<!-- logo -->
			<view class="logo">
				小U商城
			</view>
		  </view>
		  <view class="inputView">
			<input class="textinput" style="center" type="text"   placeholder="寻找商品"/>
		  </view>
		</view>
		
		<!-- 顶部导航  scroll-view -->
		<view class="tabs">
		    <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
		        <view class="uni-tab-item"  data-current="0" v-for="(item,index) in tabList" :key="item.id" @click="tabClick(index)">
		            <text class="uni-tab-item-title" :class="activeIndex==index?'uni-tab-item-title-active':''">
						{{item.catename}}
					</text>
		        </view>
				
		    </scroll-view> 
		</view>
		<!-- 推荐轮播图 -->
		<view class="">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="item.id">
					<view class="swiper-item">
						<image :src="item.img | getImage" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
		  <view class="FunctNavLi">
			<image src="../../static/index/xiaohuoban.png" alt class="FunImg" />
			<p>限时抢购</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/jifentixicopy.png" alt class="FunImg" />
		  			<p>积分商城</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/lianxiwomen.png" alt class="FunImg" />
		  			<p>联系我们</p>
		  </view>
		  <view class="FunctNavLi" @click="toClassify">
		  			<image src="../../static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
		  			<p>限时抢购</p>
		  </view>
		</view>
		
		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
				  <image class="LimitedImg" src="../../static/index/xianshi.jpg" alt />
				  <label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
				  <label class="LimitTime">{{time.hour}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{time.minute}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{time.second}}</label>
				  <label class="Seckill">秒杀</label>
				</view>
				<image src="../../static/index/goods2.jpg" class="LimitedgoodsImg" alt="">
			</view>
			
			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>		
					<!-- <div> -->
					<view class="Cloth">
						<image  src="../../static/index/goods1.jpg" alt="">
					</view>
					
					<!-- </div> -->				
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		  <!-- 轮播图2 -->
		<div class="Swiper2">
		  <image class="Swiper2Img" src="../../static/index/swiper1.jpg" alt />
		</div>
		
		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view class="tag_list" :class="navIndex==0?'active_tag_list':''" @click="navClick(0)">
					<label for="">热门推荐</label>
				</view>
				<view class="tag_list" :class="navIndex==1?'active_tag_list':''"  @click="navClick(1)">
					<label for="">发现好货</label>
				</view>
				<view class="tag_list" :class="navIndex==2?'active_tag_list':''" @click="navClick(2)">
					<label for="">只看专场</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product" v-if="list.length>0">
				<view class="product" 
				v-for="(item,index) in list[navIndex].content" 
				:key="item.id"
				@click="toDetail(item.id)"
				>
					<view class="GoodsLeft">
						<image class="GoodsImg" :src="item.img|getImage" alt />
					</view>
					<view class="GoodsCont">
						<view class="GoodConTit">{{item.goodsname}}</view>
						<view class="GoodsPrice">￥{{item.price}}</view>
						<view class="Immed">立即抢购</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabList:[],		//导航栏数组
				navIndex:0,			//商品导航栏默认下标
				activeIndex:0,		//tab默认选中下标是0
				banner:[],			//轮播图
				time:{hour:"00",minute:"00",second:"00"},	//倒计时显示的时间
				list:[],		//商品列表
			}
		},
		onLoad(){
			//获取顶部导航栏
			this.getTabList()
			
			//获取轮播图
			this.getBanner()
			
			//获取秒杀
			this.getSecondKill()
			
			//获取商品列表
			this.getGoods()
			
			
		},
		methods:{
			toDetail(id){
				// console.log(id,"111");
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			},
			//跳转商品分类页面
			toClassify(){
				uni.navigateTo({
					url:'/pages/classify/classify'
				})
			},
			//获取商品列表
			async getGoods(){
				//获取商品列表
				let result =await this.$http({url:"/api/getindexgoods"}).catch(err=>{
					console.error(err)
				})

				this.list=result.data.list;
				
			},
			//商品tab栏点击
			navClick(index){
				this.navIndex=index
			},
			getTime(endtime){
				//获取当前时间
				let nowtime=new Date().getTime()	
				let duration = Math.floor((endtime-nowtime)/1000)
				
				//获取小时数
				let hour=Math.floor(duration/3600)
				//获取分钟数
				let minute= Math.floor(duration%3600/60) 
				//剩余的秒数
				let second =duration%60;
				this.time={hour,minute,second}
			},
			//获取秒杀
			async getSecondKill(){
				let result =await this.$http({url:'/api/getseckill'}).catch(err=>{
					console.error(err)
				})
				// console.log(result);
				if(result.data.list==null){
					return;
				}

				// 获取秒杀结束时间
				let endtime=result.data.list[0].endtime;	
				//计算秒杀的小时、分钟和秒
				this.getTime(endtime)
				setInterval(()=>{
					//计算秒杀的小时、分钟和秒
					this.getTime(endtime)

				},1000)
				
				
			},
			//获取轮播图
			async getBanner(){
				let result =await this.$http({url:"/api/getbanner"}).catch(err=>{
					console.error(err)
				})

				this.banner=result.data.list;
			},
			//获取导航栏标题
			async getTabList(){
				let result =await this.$http({url:"/api/getcate"}).catch(err=>{
					console.error(err)
				})
				
				this.tabList=result.data.list;
			},
			tabClick(index){
				this.activeIndex=index;
			}
		},
		// filters:{
		// 	getImage(value){
		// 		return "http://localhost:3000"+value
		// 	}
		// }
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>
